<template>
	<view>
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" :tabWidth="150"></me-tabs>
		<mescroll-uni top="120" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" :down="downOption"
		 :up="upOption">
			<view class="task-box" v-for="(item,index) in listdata" :key="index">
				<view class="title">
					<view>{{item.cTitle}}</view>
					<text>{{tabs[item.status]}}</text>
				</view>
				<view class="task-info">
					<view class="left">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view>{{item.title}}</view>
					</view>
					<view class="right">
						<text>￥</text>{{item.arrive_price}} 
					</view>
				</view>
				<view class="button">
					<view class="button-item" v-if="item.status==1" @click="giveuptask(item.id)">放弃任务</view>
					<view class="button-item" v-if="item.status==7" @click="navgoto('/pages/task/record?id='+item.id)">提交复审</view>
					<view class="button-item" @click="navgoto('/pages/task/detail?id='+item.moonlight_id)">查看详情</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	/**
	 *  接单列表
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				listdata: 10,
				tabIndex: 0,
				tabs: ['全部', '进行中', '待审核', '已通过', '已关闭', '未通过', '仲裁中', '待复审'],
				downOption: {
					auto: true,
					autoShowLoading: true,
					textLoading: "玩命加载中...",
				},
				upOption: {
					auto: false,
					noMoreSize: 4,
					empty: {
						tip: '~ 搜索无数据 ~',
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				}
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/task/release'
			})
		},
		methods: {
			//放弃任务
			giveuptask(id) {
				let _this=this
				uni.showModal({
					title:'提示',
					content:'任务放弃后将释放给其他用户，确定嘛？',
					success(ret) {
						if( ret.confirm){
							_this.$HttRequest({
								url: '/moonlightOrder/giveUp',
								param: {id: id}
							}, 'POST', true).then((res) => {
								console.log(res)
								if (res.status === 10000) {
									_this.$ShowMsg('任务放弃成功')
									_this.upCallback({num:1})
								} else {
									_this.$ShowMsg(res.message);
								}
							}).catch((error) => {
								_this.$ShowMsg(error.errMsg)
							})
						}
					}
				})
			},
			
			downCallback(e) {

				this.mescroll.resetUpScroll()
			},
			//切换菜单
			tabChange(index) {
				this.tabIndex = index;
				this.listdata = [];
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				//console.log(page);
				this.getinitdata(page.num).then(res => {
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg(error);
				})
			},
			//获取列表数据
			getinitdata(pages) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/moonlightOrder/mine',
						param: {
							page: pages,
							status:this.tabIndex
						}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			},
			navgoto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.task-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 85%;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx auto;
		flex-direction: column;
		padding: 40rpx 30rpx;
		font-size: 28rpx;

		.button {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 25rpx;
			width: 100%;

			.button-item {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 25rpx;
				margin-left: 20rpx;
				margin-top: 30rpx;
				width: 150rpx;
				height: 55rpx;
				border: 1rpx solid #f0f0f0;
			}
		}

		.title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			text {
				color: #838383;
			}
		}

		.task-info {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}
			}

			.right {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;

				text {
					font-weight: normal;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
